<template>
    <div class="container">
        <slot></slot>
    </div>
</template>

<script setup>
// 计算navigationBar的高度
import { ref, onMounted } from 'vue';
const navigationBarHeight = ref(0);
// 计算tabbar的高度
const tabBarHeight = ref(0);
onMounted(() => {
    const navBar = document.querySelector('.navigationBar');
    if (navBar) {
        navigationBarHeight.value = navBar.clientHeight;
    }
    const tabBar = document.querySelector('.tabbar');
    if (tabBar) {
        tabBarHeight.value = tabBar.clientHeight;
    }
    // 设置body的padding-top以适应navigationBar高度
    document.body.style.paddingTop = `${navigationBarHeight.value}px`;
    // 设置body的padding-bottom以适应tabBar高度
    document.body.style.paddingBottom = `${tabBarHeight.value}px`;
});
</script>